<template>
  <view class="edit-profile-container">
    <!-- 头像区域 -->
    <view class="avatar-section">
      <image class="avatar" :src="avatar"></image>
      <text class="change-avatar" @click="chooseAvatar">点击更换头像</text>
    </view>
    <!-- 表单区域 -->
    <form class="form-section">
      <view class="form-item">
        <text class="label required">昵称</text>
        <input class="input" type="text" v-model="name" placeholder="请输入昵称" />
      </view>
      <view class="form-item">
        <text class="label required">性别</text>
        <picker mode="selector" :range="genderList" v-model="gender">
          <view class="picker-view">
            {{ genderList[gender] }}
          </view>
        </picker>
      </view>
      <view class="form-item">
        <text class="label required">年龄</text>
        <input class="input" type="number" v-model="age" placeholder="请输入年龄" />
      </view>
      <view class="form-item">
        <text class="label required">电话</text>
        <input class="input" type="number" v-model="phone" placeholder="请输入电话" />
      </view>
      <view class="form-item">
        <text class="label required">电子邮箱</text>
        <input class="input" type="email" v-model="email" placeholder="请输入电子邮箱" />
      </view>
      <view class="form-item">
        <text class="label required">学历</text>
        <picker mode="selector" :range="educationList" v-model="educationIndex">
          <view class="picker-view">
            {{ educationList[educationIndex] }}
          </view>
        </picker>
      </view>
      <view class="form-item">
        <text class="label required">院校</text>
        <input class="input" type="text" v-model="school" placeholder="请输入院校名称" />
      </view>
      <view class="form-item">
        <text class="label required">专业</text>
        <input class="input" type="text" v-model="major" placeholder="请输入专业名称" />
      </view>
      <view class="form-item">
        <text class="label required">在读状态</text>
        <picker mode="selector" :range="studyStatusList" v-model="studyStatus">
          <view class="picker-view">
            {{ studyStatusList[studyStatus] }}
          </view>
        </picker>
      </view>
      <button class="submit-btn" type="primary" @click="onSubmit">提交</button>
    </form>
  </view>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import { updateEmployInfo } from "@/api/userInformation.js";

export default {
  data() {
    return {
      avatar: "/static/logo.png", // 默认头像
      name: "",
      email: "",
      genderList: ["女", "男"],
      gender: 0,
      phone: "",
      age: 0,
      studyStatusList: ["在读", "毕业"],
      studyStatus: 0,
      desiredPosition: "",
      jobRegion: "",
      educationList: ["高中", "大专", "本科", "硕士", "博士"],
      educationIndex: 0,
      school: "",
      major: "",
      minSalary: "",
      maxSalary: "",
    };
  },
  computed: {
    ...mapState({
      userInfo: state => state.userInfo,
    })
  },
  methods: {
    chooseAvatar() {
      uni.chooseImage({
        count: 1,
        sizeType: ["original", "compressed"],
        sourceType: ["album", "camera"],
        success: (res) => {
          const tempFilePath = res.tempFilePaths[0];
          this.avatar = tempFilePath;
        },
      });
    },
    async onSubmit() {
      const formData = {
        name: this.name,
        email: this.email,
        avatar: this.avatar,
        gender: this.gender,
        phone: this.phone,
        age: this.age,
        studyStatus: this.studyStatus,
        desiredPosition: this.desiredPosition,
        jobRegion: this.jobRegion,
        education: this.educationList[this.educationIndex],
        school: this.school,
        major: this.major,
        minSalary: this.minSalary,
        maxSalary: this.maxSalary,
      };

      // 简单表单验证
      if (!formData.name) {
        uni.showToast({ title: "请输入昵称", icon: "none" });
        return;
      }

      try {
        const res = await updateEmployInfo(formData);
        console.log("提交的表单数据：", formData);
        uni.showToast({ title: "提交成功", icon: "success" });
      } catch (error) {
        console.error("提交失败：", error);
        uni.showToast({ title: "提交失败", icon: "none" });
      }
    },
    ...mapActions(['queryUserInfo']),
  },
  mounted() {
    this.queryUserInfo();
    this.name = this.userInfo?.name || "";
    this.email = this.userInfo?.email || "";
    this.gender = this.userInfo?.gender || 0;
    this.phone = this.userInfo?.phone || "";
    this.age = this.userInfo?.age || 0;
    this.studyStatus = this.userInfo?.studyStatus || 0;
    this.desiredPosition = this.userInfo?.desiredPosition || "";
    this.jobRegion = this.userInfo?.jobRegion || "";
    this.educationIndex = this.userInfo?.educationIndex || 0;
    this.school = this.userInfo?.school || "";
    this.major = this.userInfo?.major || "";
    this.minSalary = this.userInfo?.minSalary || "";
    this.maxSalary = this.userInfo?.maxSalary || "";
  },
};
</script>

<style scoped>
.edit-profile-container {
  padding: 15px;
  background-color: #fff;
}
.avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}
.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-bottom: 10px;
}
.change-avatar {
  color: #b6ccd8;
}
.form-section {
  background-color: #fff;
}
.form-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #b6ccd8;
}
.label {
  width: 100px;
  text-align: left;
  margin-right: 10px;
  color: #333;
}
.required::before {
  content: "* ";
  color: #f56c6c;
}
.input,
.picker-view {
  flex: 1;
  padding: 5px;
}
.submit-btn {
  margin-top: 20px;
  background-color: #b6ccd8;
}
</style>